<template>
  <div class="swiper">
    <swiper :options='swiperOption' ref='mySwiper' class="swiper">
      <swiper-slide v-for='(item, index) in banners' :key='index' class="swiper_item">
        <img :src="item.src" alt="轮播图" class="pic">
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
  // import { getSwiperList } from '@/api/home.js'
  export default {
    data() {
      return {
        swiperOption: {
          loop: true,
          autoplay: true,
          pagination: {
            el: '.swiper-pagination'
          }
        },
        banners: []
      }
    },
    created() {
      // 获取轮播图的图片
      // this.$api.getSwiperList().then(res => {
      //   if (res.data.code === 200) {
      //     this.banners = res.data.bannersList
      //   }
      // })
      this.banners = [
        {
          id: 1,
          src: "http://alifile.hqjy.com/hq/classfile/2020-2-19/fd29fafb-74cb-469e-8fde-15bfdc095de7qMz19Guuk6wDoepLtJd-SRAAAAAAAAAAAQ.png"
        },
        {
          id: 2,
          src: "http://alifile.hqjy.com/hq/classfile/2019-12-26/f4254460-ab30-43a0-9e90-898e75fe8a14uPrWgTSEOC0DdSlr6JGMRY8AAAAAAAAAAQ.png"
        },
        {
          id: 3,
          src: "http://alifile.hqjy.com/hq/classfile/2020-1-13/9d693968-f3e8-41c4-ada6-af15b640de11p3h5-zb7iCcBixjT3L8BTegAAAAAAAAAAQ.jpg"
        },
        {
          id: 4,
          src: "http://alifile.hqjy.com/hq/classfile/2020-1-13/f6389d6d-8d44-46ab-922e-c7db26768a62iPgPKmmO5I0BRCaMGLHJT8UAAAAAAAAAAQ.jpg"
        },
        {
          id: 5,
          src: "http://alifile.hqjy.com/hq/classfile/2019-12-28/49c9771b-d7f4-44d0-8fa8-cee89c235d2anBZdi93w2kIBebPR1WbVRv0AAAAAAAAAAQ.jpg"
        }
      ]
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    }
  }
</script>
<style lang='less'>
  .swiper {
    /* height: 150px; */
    /* width: 100%;
    min-height: 1px; */

    /* img {
      border: none;
      vertical-align: middle;
      width: 100%;
      height: 314px;
    } */
  }

  img {
    width: 100%;
    height: 100%;
  }

  .swiper /deep/ .swiper-pagination-bullet-active {
    background-color: #fff;
  }

  .swiper /deep/ .swiper-pagination-bullets {
    text-align: left;
  }

  .swiper-container {
    margin-top: 20px;
    width: 676px;
    height: 314px;
    margin-bottom: 53px;
    overflow: visible !important;
  }

  .swiper-container .swiper-wrapper .swiper-slide {
    width: 676px;
    border-radius: 20px;
  }

  .swiper-container .swiper-wrapper .swiper-slide img {
    width: 100%;
    height: 314px;
    border-radius: 20px;
  }

  .swiper-container .swiper-wrapper .swiper-slide-prev {
    margin-top: 18px;
    height: 280px !important;
  }

  .swiper-container .swiper-wrapper .swiper-slide-prev img {
    height: 280px !important;
  }

  .swiper-container .swiper-wrapper .swiper-slide-next {
    margin-top: 18px;
    height: 280px !important;
  }

  .swiper-container .swiper-wrapper .swiper-slide-next img {
    height: 280px !important;
  }

  .swiper-container .swiper-wrapper .swiper-slide-active {
    width: 676px;
  }

  .swiper-pagination {
    bottom: -30px !important;
  }

  .swiper-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: #ff1e1e;
  }

  .swiper-pagination .swiper-pagination-bullet-active {
    width: 21px;
    height: 12px;
    background: #e75230;
    border-radius: 6px;
  }
</style>